<template>
  <FormContainer :column="4">
    <el-form ref="form" :model="formData" :rules="formRules" label-width="120px">
      <el-form-item prop="litigantBusinessGroupNo" label="受检人所属业务组">
        <SearchSelectPicker
          url="/call-center/api/v1/businessGroup/page"
          placeholder="请选择受检业务组"
          lable-name="groupName"
          value-name="groupNo"
          :value.sync="formData.litigantBusinessGroupNo"
        ></SearchSelectPicker>
        <!-- :lable.sync="formData.litigantBusinessGroupName" -->
        <!-- multiple
          collapse-tags -->
      </el-form-item>
      <el-form-item prop="litigant" label="受检人">
        <SearchSelectPicker
          url="/call-center/api/v1/staffInfo/page"
          :other-raw="{groupNos:formData.litigantBusinessGroupNo}"
          placeholder="请选择受检人"
          value-name="accountNo"
          lable-name="staffName"
          :parent-id="formData.litigantBusinessGroupNo"
          :value.sync="formData.litigant"
          :lable.sync="formData.litigantName"
        ></SearchSelectPicker>
      </el-form-item>
      <el-form-item prop="executorBusinessGroupNo" label="质检人所属业务组">
        <SearchSelectPicker
          url="/call-center/api/v1/businessGroup/page"
          placeholder="请选择质检业务组"
          lable-name="groupName"
          value-name="groupNo"
          :value.sync="formData.executorBusinessGroupNo"
        ></SearchSelectPicker>
        <!-- :lable.sync="formData.executorBusinessGroupName" -->
      </el-form-item>
      <el-form-item prop="executor" label="质检人">
        <SearchSelectPicker
          url="/call-center/api/v1/staffInfo/page"
          :other-raw="{groupNos:formData.executorBusinessGroupNo}"
          placeholder="请选择质检人"
          value-name="accountNo"
          lable-name="staffName"
          :parent-id="formData.executorBusinessGroupNo"
          :value.sync="formData.executor"
          :lable.sync="formData.executorName"
        ></SearchSelectPicker>
      </el-form-item>
      <el-form-item prop="projectName" label="项目名称">
        <el-input v-model="formData.projectName" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item prop="qualityCheckContent" label="质检内容">
        <el-select v-model="formData.qualityCheckContent" filterable clearable placeholder="请选择">
          <el-option v-for="(d,i) in inspectionContentList" :key="i" :value="d.dictCode" :label="d.dictName"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="taskCode" label="任务编码" hidden>
        <el-input v-model="formData.taskCode" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <template v-if="!allegeHandle">
        <el-form-item prop="state" label="任务状态">
          <el-select v-model="formData.state" filterable clearable placeholder="请选择">
            <el-option v-for="(d,i) in taskStateList" :key="i" :value="d.dictCode" :label="d.dictName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isAppeal" label="是否申诉">
          <el-select v-model="formData.isAppeal" filterable clearable placeholder="请选择">
            <el-option v-for="(d,i) in allegeList" :key="i" :value="d.dictCode" :label="d.dictName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="isTimeout" label="是否超时">
          <el-select v-model="formData.isTimeout" filterable clearable placeholder="请选择">
            <el-option v-for="(d,i) in timeOutList" :key="i" :value="d.dictCode" :label="d.dictName"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item prop="appealState" label="申诉处理状态">
          <el-select v-model="formData.appealState" filterable clearable placeholder="请选择">
            <el-option v-for="(d,i) in allegeStateList" :key="i" :value="d.dictCode" :label="d.dictName"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item prop="businessType1" label="一级业务类">
        <!-- <SearchSelectPicker
          :value.sync="formData.businessType1"
          url="/call-center/api/v1/businessDeptRelation/page"
          :params="{query:{relationLevel:1},type:0}"
          value-name="relationCode"
          lable-name="relationName"
          @selectChange="formData.businessType2 = ''"
        ></SearchSelectPicker> -->

        <CustomDictSelect
          placeholder="请选择"
          dict-type-code="FIRST_LEVEL_BUSINESS_TYPE"
          bind-name="dictName"
          bind-value="dictCode"
          :echo-value.sync="formData.businessType1"
          filterable
        ></CustomDictSelect>

      </el-form-item>
      <el-form-item prop="businessType2" label="二级业务类">
        <!-- <SearchSelectPicker
          :value.sync="formData.businessType2"
          url="/call-center/api/v1/businessDeptRelation/page"
          :params="{query:{relationLevel:2, parentRelationCode: formData.businessType1},type:0}"
          :parent-id="formData.businessType1"
          must-pid
          :disabled="formData.businessType1===''"
          value-name="relationCode"
          lable-name="relationName"
        ></SearchSelectPicker> -->
        <CustomDictSelect
          placeholder="请选择"
          dict-type-code="SECOND_LEVEL_BUSINESS_TYPE"
          bind-name="dictName"
          bind-value="dictCode"
          :echo-value.sync="formData.businessType2"
          filterable
        ></CustomDictSelect>
      </el-form-item>
      <el-form-item prop="callType" label="呼叫类型">
        <SelectForDict :code.sync="formData.callType" dict-type-code="CALL_TYPE"></SelectForDict>
      </el-form-item>
      <el-form-item prop="cycle" label="执行周期">
        <el-date-picker v-model="formData.cycle" opt type="daterange" format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="-" clearable></el-date-picker>
      </el-form-item>
      <!-- <el-form-item :span="allegeHandle?24:6" more show> -->
      <el-form-item more show>
        <!-- <div class="button-container" style="padding-top:0"> -->
        <Button type="primary" enter @click="queryHandle">查询</Button>
        <Button type="primary" @click="resetForm">重置</Button>
        <!-- </div> -->
      </el-form-item>
    </el-form>
  </FormContainer>
</template>
<script>
import FormContainer from '@/components/FormContainer'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import CustomDictSelect from '@/components/CustomDictSelect'
import SelectForDict from '@/components/SelectForDict'
import { allegeStateList, inspectionContentList, taskStateList, allegeList, timeOutList } from '../../common'
import { mapGetters } from 'vuex'
import { deepCopy, parseTime } from '@/utils'
export default {
  name: 'Query',
  components: {
    FormContainer,
    SearchSelectPicker,
    CustomDictSelect,
    SelectForDict
  },
  props: {
    allegeHandle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        litigant: '',
        litigantName: '',
        litigantBusinessGroupNo: [],
        // litigantBusinessGroupName: [],
        executor: '',
        executorName: '',
        qualityCheckContent: '',
        executorBusinessGroupNo: [],
        // executorBusinessGroupName: [],
        projectName: '',
        taskCode: '',
        state: '',
        isAppeal: '',
        isTimeout: '',
        appealState: '',
        businessType1: '',
        businessType2: '',
        callType: '',
        cycle: []
      },
      formRules: {

      },
      inspectionContentList,
      taskStateList,
      allegeList,
      timeOutList,
      allegeStateList
    }
  },
  computed: {
    ...mapGetters(['staffName', 'accountNo', 'firstGroup', 'firstGroupName'])
  },
  created() {
    this.setGroupAccount()
  },
  methods: {
    // 查询
    queryHandle(type) {
      return this.$refs.form.validate().then(() => {
        const eq = this.$genRule('=', ['litigant', 'executor', 'taskCode', 'isAppeal', 'isTimeout', 'appealState', 'businessType1', 'businessType2', 'callType', 'qualityCheckContent', 'litigantBusinessGroupNo', 'executorBusinessGroupNo'])
        const _in = this.$genRule('in', [])
        const state = this.$genRule('=', ['state'])
        const beginDate = this.$genRule('>=', ['beginDate'])
        const endDate = this.$genRule('<=', ['endDate'])
        const data = deepCopy(this.formData)
        if (this.allegeHandle) {
          data.isAppeal = 1
        }
        if (data.cycle && data.cycle.length === 2) {
          data.beginDate = parseTime(data.cycle[0], '{y}-{m}-{d}')
          data.endDate = parseTime(data.cycle[1], '{y}-{m}-{d}')
        }
        delete data.cycle

        let otherFilters = []
        // 保存状态的只能查自己创建的
        if ([1, '1'].includes(data.state)) {
          data.createBy = this.accountNo
          otherFilters = this.$genOtherFilters(data, eq, _in, beginDate, endDate, state, this.$genRule('=', ['createBy']))
        } else if (data.state === '') {
          data.state = [2, 3, 4]
          otherFilters = this.$genOtherFilters(data, eq, _in, beginDate, endDate, this.$genRule('in', ['state']))
        } else {
          otherFilters = this.$genOtherFilters(data, eq, _in, beginDate, state, endDate)
        }

        if (type !== 'import') {
          this.$emit('on-query', otherFilters)
        }
        return otherFilters
      })
    },
    // 重置表单
    resetForm() {
      this.$set(this.formData, 'executor', this.accountNo)
      this.$set(this.formData, 'executorName', this.staffName)
      this.$set(this.formData, 'executorBusinessGroupNo', this.firstGroup)
      this.$refs.form.resetFields()
    },
    // 初始化formData group account数据
    setGroupAccount() {
      this.$set(this.formData, 'executor', this.accountNo)
      this.$set(this.formData, 'executorName', this.staffName)
      // this.$set(this.formData, 'litigantBusinessGroupNo', [this.firstGroup])
      this.$set(this.formData, 'executorBusinessGroupNo', this.firstGroup)
      // this.$set(this.formData, 'litigantBusinessGroupName', [this.firstGroupName])
    }
  }
}
</script>
<style lang="scss" module>
.wrap{

}
</style>
